<!DOCTYPE html>
<html lang="zh-CN" data-redeviation-bs-uid="99165">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="applicable-device" content="pc">
    <meta name="renderer" content="webkit">
    <title>充值中心</title>
    <link type="text/css" rel="stylesheet" href="/static/css/user.css">
    <link type="text/css" rel="stylesheet" href="/static/css/layer.css">
    <input type="hidden" id="_w_pedant">
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <!-- <script src="/static/js/jquery.cookie.js" type="text/javascript"></script> -->
    <!-- <script src="/static/js/jquery.min.js" type="text/javascript"></script> -->
    <style class="redeviation-bs-style" data-name="content">
        body>div#redeviation-bs-indicator>div {
            opacity: 0;
            pointer-events: none
        }
        
        body>iframe#redeviation-bs-sidebar.redeviation-bs-visible,
        body>iframe#redeviation-bs-overlay.redeviation-bs-visible {
            opacity: 1;
            pointer-events: auto
        }
        
        body.redeviation-bs-noscroll {
            overflow: hidden !important
        }
        
        body>div#redeviation-bs-indicator>div {
            position: absolute;
            transform: translate3d(-24px, 0, 0);
            top: 0;
            left: 0;
            width: 24px !important;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0 10px 10px 0;
            transition: opacity 0.3s, transform 0.3s;
            z-index: 2
        }
        
        body>div#redeviation-bs-indicator>div>span {
            -webkit-mask: no-repeat center/24px;
            -webkit-mask-image: url(chrome-extension://lmjefbghkfeppnpofmbfmhgodpclipbl/img/icon-bookmark.svg);
            background-color: #ffffff;
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }
        
        body>div#redeviation-bs-indicator[data-pos='right'] {
            left: auto;
            right: 0
        }
        
        body>div#redeviation-bs-indicator[data-pos='right']>div {
            transform: translate3d(24px, 0, 0);
            left: auto;
            right: 0;
            border-radius: 10px 0 0 10px
        }
        
        body>div#redeviation-bs-indicator.redeviation-bs-fullHeight>div {
            border-radius: 0
        }
        
        body>div#redeviation-bs-indicator.redeviation-bs-hover>div {
            transform: translate3d(0, 0, 0);
            opacity: 1
        }
        
        body>div#redeviation-bs-indicator[data-pos='left'].redeviation-bs-has-lsb {
            height: 100% !important;
            top: 0 !important
        }
        
        body>div#redeviation-bs-indicator[data-pos='left'].redeviation-bs-has-lsb>div {
            background: transparent
        }
        
        body>div#redeviation-bs-indicator[data-pos='left'].redeviation-bs-has-lsb>div>span {
            -webkit-mask-position-y: 20px
        }
        
        body>iframe#redeviation-bs-sidebar {
            width: 490px;
            max-width: none;
            height: 0;
            z-index: 2147483646;
            background-color: transparent !important;
            color-scheme: normal !important;
            speak: none;
            border: none;
            display: block !important;
            transform: translate3d(-490px, 0, 0);
            transition: width 0s 0.3s, height 0s 0.3s, opacity 0.3s, transform 0.3s
        }
        
        body>iframe#redeviation-bs-sidebar[data-pos='right'] {
            left: auto;
            right: 0;
            transform: translate3d(490px, 0, 0)
        }
        
        body>iframe#redeviation-bs-sidebar.redeviation-bs-visible {
            width: calc(100% + 490px);
            height: 100%;
            transform: translate3d(0, 0, 0);
            transition: opacity 0.3s, transform 0.3s
        }
        
        body>iframe#redeviation-bs-sidebar.redeviation-bs-hideMask {
            background: none !important
        }
        
        body>iframe#redeviation-bs-sidebar.redeviation-bs-hideMask:not(.redeviation-bs-hover) {
            width: calc(490px + 50px)
        }
        
        body>iframe#redeviation-bs-overlay {
            width: 100%;
            max-width: none;
            height: 100%;
            z-index: 2147483647;
            border: none;
            speak: none;
            background: rgba(255, 255, 255, 0.5) !important;
            transition: opacity 0.3s
        }
    </style>
    <style class="redeviation-bs-style" data-name="themes/glass/content">
        /*! (c) Philipp König under GPL-3.0 */
    </style>
</head>

<body>
    <div id="app" class="layui-main">
        <div class="usercontainer">
            <div class="userside">
                <div class="usertitle">
                    <img :src="image" alt="U266344">
                    <strong class="remain"><span class="layui-badge">余额: <span v-text="money">0</span></span></strong>
                </div>
                <ul class="usermenu">
                    <li class="active"><a href="https://www.lunwen90.cn/user/recharge.html">服务购买</a></li>
                    <li><a href="https://www.lunwen90.cn/user/order.html">订单记录</a></li>
                </ul>
            </div>
            <div class="usercontent">
                <div class="layui-tab layui-tab-brief" lay-filter="recharge">
                    <div class="layui-tab-content">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>1.选择商品类型</legend>
                        </fieldset>
                        <div class="recharge-type layui-clear">
                            <label data-id="10">
                                <i class="icon-selected"></i>
                                <div class="item-name"><i class="icon-jewel icon-jewel-1"></i>查看商品历史价格</div>
                                <div class="item-tips">
                                    <p>查查询近3个月的历史价格</p>
                                    <p>仅淘宝、天猫</p>
                                    <p>有效期3个月</p>
                                </div>
                                <span class="item-money"><dfn>29.8</dfn>元</span>
                            </label>
                            <label data-id="11" class="active">
                                <i class="icon-selected"></i>
                                <span class="item-alert">推荐</span>
                                <div class="item-name"><i class="icon-jewel icon-jewel-2"></i>查看商品历史价格</div>
                                <div class="item-tips">
                                    <p>查查询近3个月的历史价格</p>
                                    <p>仅淘宝、天猫</p>
                                    <p>有效期6个月</p>
                                </div>
                                <span class="item-money"><dfn>54</dfn>元</span>
                            </label>
                            <label data-id="12">
                                <i class="icon-selected"></i>
                                <div class="item-name"><i class="icon-jewel icon-jewel-3"></i>查看商品历史价格</div>
                                <div class="item-tips">
                                    <p>查查询近3个月的历史价格</p>
                                    <p>仅淘宝、天猫</p>
                                    <p>有效期1年</p>
                                </div>
                                <span class="item-money"><dfn>79</dfn>元</span>
                            </label>
                            <label data-id="13">
                                <i class="icon-selected"></i>
                                <div class="item-name"><i class="icon-jewel icon-jewel-4"></i>查看商品历史价格（全平台）</div>
                                <div class="item-tips">
                                    <p>查查询近3个月的历史价格</p>
                                    <p>支持所有商品</p>
                                    <p>有效期3个月</p>
                                </div>
                                <span class="item-money"><dfn>140</dfn>元</span>
                            </label>
                            <label data-id="14">
                                <i class="icon-selected"></i>
                                <div class="item-name"><i class="icon-jewel icon-jewel-5"></i>查看商品历史价格（全平台）</div>
                                <div class="item-tips">
                                    <p>查查询近3个月的历史价格</p>
                                    <p>支持所有商品</p>
                                    <p>有效期6个月</p>
                                </div>
                                <span class="item-money"><dfn>255</dfn>元</span>
                            </label>
                            <label data-id="15">
                                <i class="icon-selected"></i>
                                <div class="item-name"><i class="icon-jewel icon-jewel-6"></i>查看商品历史价格（全平台）</div>
                                <div class="item-tips">
                                    <p>查查询近3个月的历史价格</p>
                                    <p>支持所有商品</p>
                                    <p>有效期1年</p>
                                </div>
                                <span class="item-money"><dfn>399</dfn>元</span>
                            </label>
                            <label data-id="16">
                                <i class="icon-selected"></i>
                                <div class="item-name"><i class="icon-jewel icon-jewel-7"></i>查看商品历史价格（豪华套餐）</div>
                                <div class="item-tips">
                                    <p>查查询近1年的历史价格</p>
                                    <p>支持所有商品</p>
                                    <p>有效期1年</p>
                                </div>
                                <span class="item-money"><dfn>1080</dfn>元</span>
                            </label>
                            <label data-id="17">
                                <i class="icon-selected"></i>
                                <div class="item-name"><i class="icon-jewel icon-jewel-8"></i>查看商品历史价格（至尊套餐）</div>
                                <div class="item-tips">
                                    <p>查查询近1年的历史价格</p>
                                    <p>支持所有商品</p>
                                    <p>有效期3年</p>
                                </div>
                                <span class="item-money"><dfn>2000</dfn>元</span>
                            </label>
                        </div>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>2.选择支付方式</legend>
                        </fieldset>
                        <div class="pay-method-type layui-clear">
                            <label class="active" data-type="alipay" title="支付宝支付">
                                <span class="icon-pay icon-pay-alipay"></span>
                                <i class="icon-selected-xs"></i>
                            </label>
                            <label data-type="wxpay" title="微信支付">
                                <span class="icon-pay icon-pay-wxpay"></span>
                                <i class="icon-selected-xs"></i>
                            </label>
                        </div>
                        <div class="pay-method-btn">
                            <button class="layui-btn" @click="payment">立即支付</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=");
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1;
                    c_end = document.cookie.indexOf(";", c_start);
                    if (c_end == -1) {
                        c_end = document.cookie.length;
                    }
                    return unescape(document.cookie.substring(c_start, c_end));
                }
            }
            return "";
        }
        app = new Vue({
            el: "#app",
            data: {
                image: eval(getCookie('image')),
                money: 0,
                category: 11,
                pay_type: 'alipay',
                goods_type: 'trend_history'
            },
            methods: {
                payment: function() {
                    // console.log('category=', this.category)
                    // console.log('pay_type=', this.pay_type)
                    // console.log('goods_type=', this.goods_type)
                    if (!this.goods_type || !this.category || !this.pay_type) {
                        return layer.msg('请选择充值类型', {
                            icon: 3,
                            shift: 6,
                            shadeClose: true,
                            shade: 0.3
                        });
                    }
                    let param = new URLSearchParams()
                    param.append('goods_type', this.goods_type)
                    param.append('category', this.category)
                    param.append('pay_type', this.pay_type)
                    axios.post("http://127.0.0.1:8000/createOrder/", param).then(
                        function(response) {
                            var resp = response.data
                            console.log(resp)
                            order_id = resp['order_id']
                            console.log('order_id=', order_id)
                            let param = new URLSearchParams()
                            param.append('order_id', order_id)
                            param.append('subject', '历史价格查询定单')
                            param.append('return_url', 'http://127.0.0.1:8000/static/backindex.html#//static/page/score.html')
                            param.append('pay_type', this.pay_type)
                            axios.post("http://127.0.0.1:8000/payment/", param).then(
                                function(response) {
                                    var resp = response.data
                                    console.log(resp)
                                    alipay_url = resp['alipay_url']
                                    return window.location = alipay_url;
                                }
                            )
                        },
                        function(err) {
                            console.log(err)
                        }
                    )

                }
            }
        })
        layui.use(['jquery', 'layer', 'form', 'element'], function() {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                element = layui.element;

            $(".recharge-type label").click(function() {
                $(this).addClass("active").siblings().removeClass("active");
                console.log($(this))
                app._data.category = $(this)[0].attributes[0]['value']
                console.log('data-id=', $(this)[0].attributes[0]['value'])

            });
            $(".pay-method-type label").click(function() {
                $(this).addClass("active").siblings().removeClass("active");
                console.log('data-type=', $(this)[0].attributes[0]['value'])
                app._data.pay_type = $(this)[0].attributes[0]['value']
            });

        });
    </script>


</body>

</html>